<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  href="css/bootstrap.min.css" rel="stylesheet">
  <link  href="css/base.css"  rel="stylesheet">
  <title>网络当天实时发稿量</title>
</head>
<body>
<div class="container-fluid container-fluid-s">
  <div class="row">
    <div class="col-md-12 col-lg-6 mrbt">
      <div class="totalbox">
        <ul class="nav nav-pills totaltitle" role="tablist">
          <li class="fl"><p>当天实时发稿量</p></li>
        </ul>
        <div class="totaltem">
          <div class="col-md-12 total hbule">
            <span class="name">总发稿量</span>
            <span class="number">
              <a href="" id="num"></a>
            </span>
            <span class="name">条</span>
          </div>
        </div>
        <div class="row" style="padding: 0 2vw">
          <div class="col-md-2">
            <div class="column">
              <p>宏观经济</p>
              <div class="purple"><span class="bold" id = "hgjj">0</span>条</div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="column">
              <p>四川财经</p>
              <div class="grn"><span class="bold" id="sccj">0</span>条</div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="column">
              <p>货币市场</p>
              <div class="bule"><span class="bold" id="hbsc">0</span>条</div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="column">
              <p>外汇市场</p>
              <div class="yel"><span class="bold" id="whsc">0</span>条</div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="column">
              <p>全球财经</p>
              <div class="org"><span class="bold" id="qqcj">0</span>条</div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="column">
              <p>成都财经</p>
              <div class="ybule"><span class="bold" id="cdcj">0</span>条</div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 mrbt">
      <div class="totalbox">
        <!-- Nav tabs -->
        <ul class="nav nav-pills totaltitle" role="tablist">
          <li class="fl"><p>个人发稿量排行</p></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">
            <div id="container" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 mrbt">
      <div class="totalbox">
        <!-- Nav tabs -->
        <ul class="nav nav-pills totaltitle" role="tablist">
          <li class="fl"><p>建稿类型统计图</p></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="jglx">
            <div id="jglxchart" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-lg-3 mrbt">
      <div class="totalbox">
        <!-- Nav tabs -->
        <ul class="nav nav-pills totaltitle" role="tablist">
          <li class="fl"><p>各栏目发稿量趋势图</p></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="qst-month">
            <div id="qst-chart" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 mrbt">
      <div class="totalbox">
        <!-- Nav tabs -->
        <ul class="nav nav-pills totaltitle" role="tablist">
          <li class="fl"><p>人机发稿量占比</p></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane" id="rj-month">
            <div id="rj-monthchart" style="width: 100%;height: 100%;"></div>
          </div>
          <div role="tabpanel" class="tab-pane active" id="rj-day">
            <div id="rj-daychart" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 mrbt">
      <div class="totalbox">
        <!-- Nav tabs -->
        <ul class="nav nav-pills totaltitle" role="tablist">
          <li class="fl"><p>各栏目发稿量分布图</p></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="fbt-month">
            <div id="fbt-chart" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 mrbt">
      <div class="totalbox">
        <!-- Nav tabs -->
        <ul class="nav nav-pills totaltitle" role="tablist">
          <li class="fl"><p>文章类型统计图</p></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="zxlx">
            <div id="wzlxchart" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script type="text/javascript">

  var myChart = echarts.init(document.getElementById('rj-daychart'));

  // 指定图表的配置项和数据

  $(function (){
    $.ajax({
      type: "get",
      url: "http://localhost:9999/getData",
      success: function(result){
        console.log(result)
        // 指定图表的配置项和数据
        var datas = result;
        document.getElementById("num").innerHTML = datas[0][0].value+datas[0][1].value;
        var option = {
          title: {
            text: '',
            left: 'center',
            textStyle: {
              color: '#999',
              fontWeight: 'normal',
              fontSize: 14
            }
          },
          series: datas.map(function (data, idx) {
            var top = idx * 33.3;
            return {
              type: 'pie',
              radius: [150,130],
              top: top + '33.33%',
              height: '33.33%',
              left: 'center',
              width: 600,
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
              },
              label: {
                alignTo: 'edge',
                formatter: '{name|{b}}\n{time|{c} 条}',
                minMargin: 5,
                edgeDistance: 70,
                lineHeight: 15,
                rich: {
                  time: {
                    fontSize: 10,
                    color: '#999'
                  }
                }
              },
              labelLine: {
                length: 15,
                length2: 0,
                maxSurfaceAngle: 80
              },
              labelLayout: function (params) {
                const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                const points = params.labelLinePoints;
                // Update the end point.
                points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                return {
                  labelLinePoints: points
                };
              },
              data: data
            };
          })
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    });

    $.ajax({
      type: "get",
      url: "http://localhost:9999/getEssayPie",
      success:function (msg){
        var chartDom = document.getElementById('fbt-chart');
        var myChart = echarts.init(chartDom);
        document.getElementById("hgjj").innerHTML = msg[0].value;
        document.getElementById("sccj").innerHTML = msg[1].value;
        document.getElementById("hbsc").innerHTML = msg[2].value;
        document.getElementById("whsc").innerHTML = msg[3].value;
        document.getElementById("qqcj").innerHTML = msg[4].value;
        document.getElementById("cdcj").innerHTML = msg[5].value;
        var option;
        option = {
          title: {
            text: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '70%',
              data: msg,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);

      }
    });

    $.ajax({
      type: "get",
      url: "http://localhost:9999/getLineMap",
      success:function (msg){
        console.log(msg);
        let timeList = msg.timeList;
        let CdcjList = msg.CdcjList;
        let QqcjList = msg.QqcjList;
        let HgjjList = msg.HgjjList;
        let WhscList = msg.WhscList;
        let SccjList = msg.SccjList;
        let HbscList = msg.HbscList;

        var chartDom = document.getElementById('qst-chart');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            bottom:20,
            data: ['成都经济', '全球财经', '宏观经济','外汇市场','四川经济','货币市场'],
            textStyle:{color:'#ffffff'}
          },
          grid: {
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap:false,
            axisLabel:{
              show:true,
              textStyle:{
                fontSize:7
              }
            },
            boundaryGap: false,
            data:timeList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '成都经济',
              type: 'line',
              stack: 'Total',
              data: CdcjList
            },
            {
              name: '全球财经',
              type: 'line',
              stack: 'Total',
              data: QqcjList
            },
            {
              name: '宏观经济',
              type: 'line',
              stack: 'Total',
              data: HgjjList
            },
            {
              name: '外汇市场',
              type: 'line',
              stack: 'Total',
              data: WhscList
            },
            {
              name: '四川经济',
              type: 'line',
              stack: 'Total',
              data: SccjList
            },
            {
              name: '货币市场',
              type: 'line',
              stack: 'Total',
              data: HbscList
            }
          ]
        };
        option && myChart.setOption(option);
      }
    })

  });

  $.ajax({
    type: "get",
    url: "http://localhost:9999/getBarData",
    success:function (msg){
      var chartDom = document.getElementById('container');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        dataset: {
          source: msg
        },
        grid: { containLabel: true },
        xAxis: { name: '条' },
        yAxis: { type: 'category' },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product'
            }
          }
        ]
      };
      option && myChart.setOption(option);
    }
  });


  $.ajax({
    type: "get",
    url: "http://localhost:9999/getBookData",
    success: function (msg) {
      let columns = msg.columns;
      let original = msg.original;
      let editor = msg.editor;
      let translator = msg.translator;
      var myChart = echarts.init(document.getElementById('jglxchart'));
      var series = [
        {
          name: '原创',
          data: original,
          type: 'bar',
          stack: 'stack1',
          itemStyle: { color: '#4169E1' } // 蓝色
        },
        {
          name: '编辑',
          data: editor,
          type: 'bar',
          stack: 'stack1',
          itemStyle: { color: '#ADFF2F' } // 绿色
        },
        {
          name: '翻译',
          data: translator,
          type: 'bar',
          stack: 'stack1',
          itemStyle: { color: '#DA70D6' } // 紫色
        }
      ];

      var stackInfo = {};
      for (let i = 0; i < series[0].data.length; ++i) {
        for (let j = 0; j < series.length; ++j) {
          const stackName = series[j].stack;
          if (!stackName) {
            continue;
          }
          if (!stackInfo[stackName]) {
            stackInfo[stackName] = {
              stackStart: [],
              stackEnd: []
            };
          }
          const info = stackInfo[stackName];
          const data = series[j].data[i];
          if (data && data !== '-') {
            if (info.stackStart[i] == null) {
              info.stackStart[i] = j;
            }
            info.stackEnd[i] = j;
          }
        }
      }

      for (let i = 0; i < series.length; ++i) {
        const data = series[i].data;
        const info = stackInfo[series[i].stack];
        for (let j = 0; j < series[i].data.length; ++j) {
          const isEnd = info.stackEnd[j] === i;
          const topBorder = isEnd ? 20 : 0;
          const bottomBorder = 0;
          data[j] = {
            value: data[j],
            itemStyle: {
              borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
            }
          };
        }
      }

      var option = {
        backgroundColor: '#2c343c',
        xAxis: {
          type: 'category',
          data: columns,
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: { textStyle: { color: '#fff' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: { textStyle: { color: '#fff' } }
        },
        series: series,
        legend: {
          textStyle: { color: '#fff' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var tooltip = params[0].axisValueLabel + '<br>';
            for (var i = 0; i < params.length; i++) {
              tooltip += params[i].marker + ' ' + params[i].seriesName + ': ' + params[i].value + '<br>';
            }
            return tooltip;
          }
        }
      };

      myChart.setOption(option);
    }
  });

  let Inquiries;
  let News;
  let Alerts;
  let List1;
  $.ajax({
    type: "get",
    url: "http://localhost:9999/getEssayList",
    success: function (msg) {
      Inquiries = msg.Inquiries
      News = msg.News
      Alerts = msg.Alerts
      List1 = msg.List1;

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('wzlxchart'));

      // 指定图表的配置项和数据
      var series = [
        {
          name: '资讯',
          data: Inquiries,
          type: 'bar',
          stack: 'stack1',
          itemStyle: { color: '#9400d3' }
        },
        {
          name: '要闻',
          data: News,
          type: 'bar',
          stack: 'stack1',
          itemStyle: { color: '#ffff99' }
        },
        {
          name: '快讯',
          data: Alerts,
          type: 'bar',
          stack: 'stack1',
          itemStyle: { color: '#e69966' }
        }
      ];

      var stackInfo = {};
      for (let i = 0; i < series[0].data.length; ++i) {
        for (let j = 0; j < series.length; ++j) {
          const stackName = series[j].stack;
          if (!stackName) {
            continue;
          }
          if (!stackInfo[stackName]) {
            stackInfo[stackName] = {
              stackStart: [],
              stackEnd: []
            };
          }
          const info = stackInfo[stackName];
          const data = series[j].data[i];
          if (data && data !== '-') {
            if (info.stackStart[i] == null) {
              info.stackStart[i] = j;
            }
            info.stackEnd[i] = j;
          }
        }
      }

      for (let i = 0; i < series.length; ++i) {
        const data = series[i].data;
        const info = stackInfo[series[i].stack];
        for (let j = 0; j < series[i].data.length; ++j) {
          const isEnd = info.stackEnd[j] === i;
          const topBorder = isEnd ? 20 : 0;
          const bottomBorder = 0;
          data[j] = {
            value: data[j],
            itemStyle: {
              borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
            }
          };
        }
      }

      var option = {
        backgroundColor: '#2c343c',
        xAxis: {
          type: 'category',
          data: List1,
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: { textStyle: { color: '#fff' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: { textStyle: { color: '#fff' } },
          // 设置y轴的最大值为自动
        },
        series: series,
        legend: {
          textStyle: { color: '#fff' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var tooltip = params[0].axisValueLabel + '<br>';
            for (var i = 0; i < params.length; i++) {
              tooltip += params[i].marker + ' ' + params[i].seriesName + ': ' + params[i].value + '<br>';
            }
            return tooltip;
          }
        }

      };
      myChart.setOption(option);
    }
  });

</script>
</body>
</html>